{% extends "base.html" %}

{% block title %}校园新闻公告{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-newspaper"></i> 新闻公告</h2>
                <a href="{{ url_for('dashboard') }}" class="btn btn-outline-primary">
                    <i class="fas fa-home"></i> 返回主页
                </a>
            </div>
        </div>
    </div>

    <!-- 新闻列表 -->
    <div class="row">
        <div class="col-12">
            {% if news_list %}
                {% for news in news_list %}
                <div class="card mb-4 news-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0 news-title">
                            <i class="fas fa-bullhorn text-primary mr-2"></i>
                            {{ news.title }}
                        </h5>
                        <div class="news-meta">
                            <span class="badge badge-info mr-2">
                                <i class="fas fa-user"></i> {{ news.name }}
                            </span>
                            <span class="badge badge-secondary">
                                <i class="fas fa-clock"></i> {{ news.publish_time.strftime('%Y-%m-%d %H:%M') }}
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="news-content">
                            {{ news.content | replace('\n', '<br>') | safe }}
                        </div>
                    </div>
                    <div class="card-footer text-muted">
                        <small>
                            <i class="fas fa-calendar-alt"></i> 
                            发布于 {{ news.publish_time.strftime('%Y年%m月%d日 %H:%M') }}
                        </small>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <!-- 空状态 -->
                <div class="text-center py-5">
                    <div class="empty-state">
                        <i class="fas fa-newspaper fa-5x text-muted mb-4"></i>
                        <h4 class="text-muted">暂无新闻公告</h4>
                        <p class="text-muted">目前还没有发布任何新闻公告</p>
                        {% if session.is_admin %}
                        <button class="btn btn-primary mt-3" data-toggle="modal" data-target="#addNewsModal">
                            <i class="fas fa-plus"></i> 发布第一条新闻
                        </button>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 发布新闻模态框 -->
{% if session.is_admin %}
<div class="modal fade" id="addNewsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus-circle"></i> 发布新闻公告
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ url_for('add_news') }}" method="POST">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="newsTitle">
                            <i class="fas fa-heading"></i> 新闻标题
                        </label>
                        <input type="text" class="form-control" id="newsTitle" name="title" 
                               placeholder="请输入新闻标题" required maxlength="200">
                        <small class="form-text text-muted">标题不超过200个字符</small>
                    </div>
                    <div class="form-group">
                        <label for="newsContent">
                            <i class="fas fa-align-left"></i> 新闻内容
                        </label>
                        <textarea class="form-control" id="newsContent" name="content" 
                                  rows="8" placeholder="请输入新闻内容" required></textarea>
                        <small class="form-text text-muted">支持换行，发布后会自动格式化</small>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>发布提示：</strong>
                        <ul class="mb-0 mt-2">
                            <li>请确保新闻内容准确无误</li>
                            <li>发布后所有用户都能看到此新闻</li>
                            <li>新闻将按发布时间倒序显示</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane"></i> 发布新闻
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<style>
.news-card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 15px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.news-card .card-header {
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

.news-title {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
}

.news-meta .badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
}

.news-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #495057;
    text-align: justify;
    padding: 0.5rem 0;
}

.card-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 1.5rem;
}

.empty-state {
    padding: 3rem 2rem;
}

.empty-state i {
    opacity: 0.3;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .news-card .card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .news-meta {
        margin-top: 0.5rem;
    }
    
    .news-meta .badge {
        margin-bottom: 0.25rem;
    }
    
    .modal-dialog {
        margin: 1rem;
    }
}

/* 动画效果 */
.news-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 模态框样式优化 */
.modal-content {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modal-header {
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    border-radius: 15px 15px 0 0;
}

.modal-header .close {
    color: white;
    opacity: 0.8;
}

.modal-header .close:hover {
    opacity: 1;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.btn {
    border-radius: 25px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>

<script>
$(document).ready(function() {
    // 新闻卡片动画
    $('.news-card').each(function(index) {
        $(this).css({
            'animation-delay': (index * 0.1) + 's'
        });
    });
    
    // 表单验证
    $('#addNewsModal form').on('submit', function(e) {
        var title = $('#newsTitle').val().trim();
        var content = $('#newsContent').val().trim();
        
        if (!title) {
            e.preventDefault();
            alert('请输入新闻标题');
            $('#newsTitle').focus();
            return false;
        }
        
        if (!content) {
            e.preventDefault();
            alert('请输入新闻内容');
            $('#newsContent').focus();
            return false;
        }
        
        if (title.length > 200) {
            e.preventDefault();
            alert('新闻标题不能超过200个字符');
            $('#newsTitle').focus();
            return false;
        }
    });
    
    // 清空表单当模态框关闭时
    $('#addNewsModal').on('hidden.bs.modal', function() {
        $(this).find('form')[0].reset();
    });
    
    // 字符计数
    $('#newsTitle').on('input', function() {
        var length = $(this).val().length;
        var maxLength = 200;
        var remaining = maxLength - length;
        
        if (remaining < 20) {
            $(this).next('.form-text').html('还可输入 <span class="text-warning">' + remaining + '</span> 个字符');
        } else {
            $(this).next('.form-text').html('标题不超过200个字符');
        }
        
        if (remaining < 0) {
            $(this).addClass('is-invalid');
        } else {
            $(this).removeClass('is-invalid');
        }
    });
});
</script>
{% endblock %}